<template>
  <a-form-model-item class="upload-img" :label="attrObj.formLabel">
    <a-upload-dragger
      accept=".png,.jpg"
      class="avatar-uploader"
      :action="`${BASE_URL}/upload/uploadImages`"
      list-type="picture-card"
      :showUploadList="false"
      :headers="headers"
      @change="handleChange"
      :disabled="attrObj.isDisabled"
      :before-upload="beforeUpload"
    >
      <div v-if="!formModel[attrObj.formProps] && !attrObj.isDisabled">
        <p class="ant-upload-drag-icon">
          <a-icon type="upload" />
        </p>
        <p class="ant-upload-text">点击上传</p>
      </div>
      <img
        v-else
        :src="formModel[attrObj.formProps] || emptyImg"
        alt="avatar"
      />
    </a-upload-dragger>
    <p
      style="font-size: 12px;"
      v-if="formModel[attrObj.formProps] && !attrObj.isDisabled"
    >
      只支持jpg、png类型的文件，大小不超过500k
    </p>
    <p
      class="del-btn"
      v-if="formModel[attrObj.formProps] && !attrObj.isDisabled"
      @click="onDel"
    >
      删除图片
    </p>
  </a-form-model-item>
</template>
<script>
import { BASE_URL } from "@/services/api";
import Cookie from "js-cookie";
export default {
  name: "UploadDarg",
  data() {
    return {
      emptyImg: require("@/assets/img/emptyImg.png"),
      BASE_URL,
      headers: {
        Authorization: Cookie.get("Authorization")
      }
    };
  },
  props: {
    attrObj: {
      type: Object,
      default() {
        return {
          formLabel: "",
          formProps: "",
          isDisabled: false
        };
      }
    },
    formModel: {
      type: Object,
      default() {
        return {}
      }
    },
    // 区分是那个功能的上传（例如：fleetManage 车辆    driverManage 司机
    type: {
      type: String
    }
  },
  components: {},
  computed: {},
  mounted() {},
  methods: {
    onDel() {
      this.formModel[this.attrObj.formProps] = "";
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        const {
          file: {
            response: {
              data
            }
          }
        } = info;
        this.formModel[this.attrObj.formProps] = data;
        this.loading = false;
      }
    },
    getBase64(img, callback) {
      const reader = new FileReader();
      reader.addEventListener("load", () => callback(reader.result));
      reader.readAsDataURL(img);
    },
    handlePreview() {},
    beforeUpload(file) {
      // 禁止拖拽上传
      if (event.type === "drop") {
        return false;
      }
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.warning("只支持jpg、png格式图片!");
        return false;
      }
      const isLt500k = file.size / 1024 / 1024 < 0.5;
      if (!isLt500k) {
        this.$message.warning("图片大小不能超过500k!");
        return false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.upload-img {
  .order-select {
    width: 70%;
  }
  .ant-upload.ant-upload-drag p.ant-upload-text {
    font-size: 12px;
  }

  ::v-deep .avatar-uploader > .ant-upload {
    img {
      width: auto;
      height: 90px;
      object-fit: fill;
    }
  }

  .del-btn {
    text-align: center;
    cursor: pointer;
    color: #3d6cf7;
  }
}
</style>
